<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #myMap {
            width: 800px;
            height: 500px;
            border: 1px solid rgb(196, 63, 63);
            margin: 20px auto;
        }
    </style>
</head>

<body>
    <div id="myMap"></div>
</body>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=
1.0&&type=webgl&ak=Uq0Nlqg53ziOZLmMALeg7UoScIQQe2GU"></script>
<script>
    // //实例化地图
    // let map = new BMapGL.Map('myMap')
    // let point = new BMapGL.Point(111.507211, 33.171856)
    // map.centerAndZoom(point, 18)
    // map.enableScrollWheelZoom()
    // map.setHeading(50)
    // map.setTilt(60)
    // map.setMapType(BMAP_NORMAL_MAP)
      //实例化地图
      let map = new BMapGL.Map('myMap')
        //指定地图经度和纬度，即地图的中心点
    let point = new BMapGL.Point(116.223126, 40.241085)

    //生成地图
    map.centerAndZoom(point, 15)
        //允许鼠标滚轮放大或缩小
    map.enableScrollWheelZoom()
        //实例化缩放控件
    let zoomCtrl = new BMapGL.ZoomControl({
        //设置缩放控件的停靠位置
        anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
        //设置缩放控件的偏移量
        offset: new BMapGL.Size(30, 16)
    })

    //缩放控件添加到百度地图中
    map.addControl(zoomCtrl)

    //生成一个图标
    const url = 'https://m.360buyimg.com/babel/jfs/t1/45316/3/388/884/5cd4f25eEea4c67ed/671f7c186c5e9b01.png'
    let myIcon = new BMapGL.Icon(url, new BMapGL.Size(20, 20), {
        anchor: new BMapGL.Size(0, 0),

    })

    //将图标添加到标记覆盖物中
    const marker = new BMapGL.Marker(new BMapGL.Point(116.223763, 40.241351), {
        icon: myIcon,
        offset: new BMapGL.Size(30, -20)
    })


    //最后将标记覆盖物添加到百度地图中
    map.addOverlay(marker)

    //添加文本
    let str = `<div>积云教育</div><div>010-4574573235</div>`
    const txt = new BMapGL.Label(str, {
        position: new BMapGL.Point(116.223126, 40.241085),
        offset: new BMapGL.Size(-50, -30)
    })
    txt.setStyle({
        width: '100px',
        height: '30px',
        border: '1px solid #ccc',
        textAlign: 'center',
        //  lineHeight: '80px',
        backgroundColor: 'rgba(0,0,255,.6)',
        color: '#fff'
    })

    map.addOverlay(txt)
</script>

</html>